<script setup lang="ts">
  defineOptions({
    name: 'ECard',
    inheritAttrs: false
  })
</script>
<template>
  <div class="card w-full h-full">
    <div class="moon circle moon-behive absolute">
      <h1 class="zhong">中</h1>
      <h1 class="qiu">秋</h1>
      <p class="des absolute">但愿人长久 千里共婵娟<br />MID-Autumn Festival</p></div
    >
    <div class="moon circle moon-yellow absolute">
      <h1 class="zhong">中</h1>
      <h1 class="qiu">秋</h1>
      <p class="des absolute">但愿人长久 千里共婵娟<br />MID-Autumn Festival</p></div
    >

    <!-- 月亮主体内容 -->
    <div class="moon-body circle">
      <!-- 右上角兔子 -->
      <div class="rabbit">
        <div class="body">
          <div class="body1"></div>
          <div class="body2"></div>
          <div class="hand1"></div>
          <div class="foot1"></div>
          <div class="foot2"></div>
          <div class="tail"></div>
        </div>
        <div class="head">
          <div class="mouth"></div>
          <div class="ear1"></div>
          <div class="ear2"></div>
        </div>
      </div>

      <!-- 左下角小兔子 -->
      <div class="rabbit-little"><p></p></div>
    </div>

    <div class="lantern" style="--l: 15%; --t: 7%; --scale: 0.9"></div>
    <div class="lantern" style="--r: 15%; --t: 5%; --scale: 1"></div>
    <div class="lantern" style="--l: 8%; --t: 30%; --scale: 0.3"></div>
    <div class="lantern" style="--r: 6%; --t: 20%; --scale: 0.6"></div>
    <div class="lantern" style="--r: 12%; --t: 38%; --scale: 0.2"></div>

    <!-- 祥云 -->
    <div class="cloud" style="--t: 77%; --scale: 0.8; --rotateY: 0; --color: #ce7808; --time: 8s">
      <div class="cloud1"></div>
      <div class="cloud2"></div>
      <div class="cloud3"></div>
      <div class="cloud4"></div>
      <div class="cloud5"></div>
      <div class="cloud6"></div>
    </div>

    <div class="cloud" style="--t: 77%; --scale: 0.9; --rotateY: 0; --color: #05aaab; --time: 4s">
      <div class="cloud1"></div>
      <div class="cloud2"></div>
      <div class="cloud3"></div>
      <div class="cloud4"></div>
      <div class="cloud5"></div>
      <div class="cloud6"></div>
    </div>

    <div class="cloud" style="--t: 52%; --scale: 0.5; --rotateY: 0; --color: #fff; --time: 0s">
      <div class="cloud1"></div>
      <div class="cloud2"></div>
      <div class="cloud3"></div>
      <div class="cloud4"></div>
      <div class="cloud5"></div>
      <div class="cloud6"></div>
    </div>

    <div
      class="cloud cloud_reverse"
      style="--t: 68%; --scale: 0.8; --rotateY: 180deg; --color: #fff; --time: 8s"
    >
      <div class="cloud1"></div>
      <div class="cloud2"></div>
      <div class="cloud3"></div>
      <div class="cloud4"></div>
      <div class="cloud5"></div>
      <div class="cloud6"></div>
    </div>

    <div
      class="cloud cloud_reverse"
      style="--t: 64%; --scale: 0.4; --rotateY: 180deg; --color: #fa0e7c; --time: 3s"
    >
      <div class="cloud1"></div>
      <div class="cloud2"></div>
      <div class="cloud3"></div>
      <div class="cloud4"></div>
      <div class="cloud5"></div>
      <div class="cloud6"></div>
    </div>

    <div
      class="cloud cloud_reverse"
      style="--t: 85%; --scale: 0.3; --rotateY: 180deg; --color: #6ee136; --time: 0s"
    >
      <div class="cloud1"></div>
      <div class="cloud2"></div>
      <div class="cloud3"></div>
      <div class="cloud4"></div>
      <div class="cloud5"></div>
      <div class="cloud6"></div>
    </div>
  </div>
</template>
<style scoped>
  /* 在线链接服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 */
  @font-face {
    font-family: '阿里妈妈东方大楷 Regular';
    font-weight: 400;

    src:
      url('//at.alicdn.com/wf/webfont/3JTCJEEgmPFa/tImJlangMrw8.woff2') format('woff2'),
      url('//at.alicdn.com/wf/webfont/3JTCJEEgmPFa/u4Nis8eXTxbL.woff') format('woff');
    font-display: swap;
  }

  /* 在线链接服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 */
  @font-face {
    font-family: '阿里妈妈数黑体 Bold';
    font-weight: 700;

    src:
      url('//at.alicdn.com/wf/webfont/3JTCJEEgmPFa/V89BjBNVQTiw.woff2') format('woff2'),
      url('//at.alicdn.com/wf/webfont/3JTCJEEgmPFa/WkPNRPnAeEho.woff') format('woff');
    font-display: swap;
  }
  .card {
    position: relative;

    overflow: hidden;

    background: var(--bg);
    background-size: var(--w) var(--h);

    --w: 100px;
    --h: 50px;
    --color1: #707dda;
    --color2: #09135e;
    --bg: linear-gradient(30deg, var(--color1) 0, var(--color1) 30%, transparent 30%),
      linear-gradient(-30deg, var(--color1) 0, var(--color1) 30%, transparent 30%),
      radial-gradient(
        at center bottom,
        var(--color2) 0%,
        var(--color1) 2%,
        var(--color1) 2%,
        var(--color1) 6%,
        var(--color2) 6%,
        var(--color2) 8%,
        var(--color1) 8%,
        var(--color1) 12%,
        var(--color2) 12%,
        var(--color2) 15%,
        var(--color1) 15%,
        var(--color1) 19%,
        var(--color2) 19%,
        var(--color2) 23%,
        var(--color1) 23%,
        var(--color1) 28%,
        var(--color2) 28%,
        var(--color2) 32%,
        var(--color1) 32%,
        var(--color1) 37%,
        var(--color2) 37%,
        var(--color2) 42%,
        var(--color1) 42%,
        var(--color1) 48%,
        var(--color2) 48%,
        var(--color2) 54%,
        var(--color1) 54%,
        var(--color1) 61%,
        var(--color2) 61%,
        var(--color2) 70%,
        var(--color1) 70%,
        var(--color1) 100%
      );
  }
  .card::after {
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    content: '';

    background: var(--bg);
    background-position: calc(var(--w) / 2) calc(var(--h) / 2);
    background-size: var(--w) var(--h);

    --color1: #707dda;
    --color2: #09135e;
    mix-blend-mode: multiply;
  }
  /* 月亮 */
  .moon {
    z-index: 1;
  }
  .moon h1 {
    position: absolute;

    pointer-events: none;

    color: #000;

    font-family: 阿里妈妈东方大楷 Regular;
    font-size: 28vmin;
    font-weight: bold;
    line-height: 1;
  }
  .zhong {
    top: 10%;
    left: 15%;
  }
  .qiu {
    top: 50%;
    left: 40%;
  }
  .des {
    position: absolute;
    top: 35%;
    right: 10%;

    color: var(--color2);

    font-family: 阿里妈妈数黑体 Bold;
    font-size: 2.5vmin;
    font-weight: bold;
    line-height: 1;
  }
  .moon-behive {
    background-color: #fff;
    box-shadow: 0 0 20px #fff;

    mix-blend-mode: screen;
  }
  .moon-behive h1 {
    color: #000;
  }
  .moon-yellow {
    background: linear-gradient(#ff0, #fc0);

    mix-blend-mode: multiply;
  }
  .moon-yellow h1,
  .moon-yellow p {
    color: #fff;
  }

  /* 月亮主题内容 */
  .moon-body {
    z-index: 3;
  }

  .circle {
    position: absolute;
    top: 50%;
    left: 50%;

    width: 70vmin;
    height: 70vmin;

    transform: translate(-50%, -50%);

    border-radius: 50%;
  }

  .rabbit {
    position: absolute;
    top: 2vmin;
    right: 1vmin;

    width: 18vmin;
    height: 18vmin;
  }
  .rabbit div {
    position: absolute;
  }
  .rabbit .body {
    top: 40%;
    left: 20%;

    width: 100%;
    height: 100%;
  }
  .rabbit .body1 {
    top: -12%;
    left: -7%;

    width: 60%;
    height: 40%;

    transform: rotate(30deg);

    border-radius: 50%;
    background-color: #fff;
    box-shadow: 0 2px 4px 0 #bbb9a7;
  }
  .rabbit .body2 {
    top: -13%;
    left: 8%;

    width: 50%;
    height: 50%;

    transform: rotate(30deg);

    border-radius: 50%;
    background-color: #fff;
    box-shadow: 5px 2px 4px 0 #bbb9a7;
  }
  .rabbit .hand1 {
    top: 0;
    left: -32%;

    width: 50%;
    height: 15%;

    transform: rotate(13deg);
    animation: hand 0.8s linear infinite alternate;

    border-left: 1px solid #bbb9a7;
    border-radius: 50%;
    background-color: #fff;
  }
  @keyframes hand {
    to {
      transform: rotate(8deg);
    }
  }
  .rabbit .foot1 {
    top: 26%;
    left: 12%;

    width: 50%;
    height: 15%;

    transform: rotate(74deg);
    animation: foot1 0.8s linear infinite alternate;

    border-radius: 50%;
    background-color: #fff;
  }
  @keyframes foot1 {
    to {
      transform: rotate(82deg);
    }
  }
  .rabbit .foot2 {
    top: 15%;
    left: 24%;

    width: 50%;
    height: 15%;

    transform: rotate(70deg);
    animation: foot2 0.8s linear infinite alternate;

    border-radius: 50%;
    background-color: #fff;
  }
  @keyframes foot2 {
    to {
      transform: rotate(76deg);
    }
  }
  .rabbit .tail {
    top: 0;
    left: 51%;

    width: 15%;
    height: 15%;

    border-radius: 50%;
    background-color: #fff;
  }

  .rabbit .head {
    top: 0;
    left: 0;

    width: 40%;
    height: 40%;

    border-bottom: 1px solid rgb(133, 130, 130);
    border-radius: 50%;
    background: #fff;
  }
  .rabbit .head::after {
    position: absolute;
    top: 50%;
    left: 35%;

    width: 2.5%;
    height: 20%;

    content: '';
    transform: rotate(-64deg);

    border-radius: 12.5%;
    background: #a6aaa4;
    box-shadow: 0 0 2px 0 rgb(53, 52, 52);
  }
  .rabbit .mouth {
    top: 32.5%;
    left: -7.5%;

    width: 45%;
    height: 62.5%;

    transform: rotate(-60deg);

    border-left: 1px solid #ccc;
    border-radius: 50%;
    background: #fff;
  }
  .rabbit .mouth::before {
    position: absolute;
    top: 7.5%;
    left: 5%;

    width: 7.5%;
    height: 2.5%;

    content: '';
    transform: rotate(84deg);

    background: #a6aaa4;
  }
  .rabbit .ear1 {
    top: -22.5%;
    right: -75%;

    width: 125%;
    height: 37.5%;

    transform: rotate(-30deg);

    border-radius: 50%;
    background-color: #fff;
  }
  .rabbit .ear2 {
    top: 17.5%;
    right: -95%;

    width: 125%;
    height: 32.5%;

    border-bottom: 1px solid #8f8c74;
    border-radius: 50%;
    background-color: #fff;
  }
  .rabbit .ear2::after {
    position: absolute;
    right: 5%;
    bottom: 5%;

    width: 70%;
    height: 70%;

    content: '';

    border-radius: 50%;
    background: pink;
  }

  .rabbit-little {
    position: absolute;
    bottom: 20%;
    left: 14%;

    width: 12vmin;
    height: 7vmin;

    animation: rabbit-little 1s linear infinite;

    border-radius: 41% 59% 41% 41% / 54% 60% 40% 41%;
    background-color: #fff;
    background-image: radial-gradient(circle at 80% 48%, #000 0%, #000 4%, transparent 4%);

    font-size: 1.2vmin;

    --footH: 2.5vmin;
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.2));
  }
  @keyframes rabbit-little {
    20% {
      transform: rotate(-10deg) translate(1em, -2em);

      box-shadow: -0.2em 3em 0 -1em #928282;

      --footH: 2.5vmin;
    }

    40% {
      transform: rotate(10deg) translate(3em, -4em);

      box-shadow: -0.2em 3.25em 0 -1.1em #928282;

      --footH: 2.5vmin;
    }

    60%,
    75% {
      transform: rotate(0) translate(4em, 0);

      box-shadow: -0.2em 1em 0 -0.75em #928282;

      --footH: 0;
    }
  }
  /* 小兔子耳朵 */
  .rabbit-little::before {
    position: absolute;
    top: -50%;
    right: 22%;

    width: var(--earW);
    height: 6vmin;

    content: '';
    transform: rotate(-35deg);

    border-radius: 50%;
    background: #fff;
    box-shadow: -2vmin 0.2vmin 0px 0.3vmin #fff;

    --earW: 1.65vmin;
  }
  /* 小兔子脚 */
  .rabbit-little::after {
    position: absolute;
    bottom: -0.3vmin;
    left: 3%;

    width: 2.5vmin;
    height: var(--footH);

    content: '';

    border-radius: 50%;
    background: #fff;
    box-shadow: 7vmin 0 0px 0.05vmin #fff;
  }
  .rabbit-little > p {
    position: absolute;
    top: 0.8vmin;
    left: -1vmin;

    width: 2.5vmin;
    height: 2.5vmin;

    border-radius: 50%;
    background: #fff;
  }

  /* 灯笼 */
  .lantern {
    position: absolute;
    z-index: 1;
    top: var(--t);
    right: var(--r);
    left: var(--l);

    width: var(--lanternWidth);
    height: var(--lanternHeight);

    transform: scale(var(--scale));
    animation: lantern 1s linear infinite alternate;

    background: radial-gradient(circle at center, #febb75 0%, transparent var(--radius)),
      repeating-linear-gradient(
        to right,
        transparent 0%,
        transparent 15%,
        var(--lanternLine) 15%,
        var(--lanternLine) 25%
      );
    background-color: #fd3c4e;
    background-position:
      center,
      calc(var(--lanternWidth) / 6) 0;

    --lanternLine: #d7061f;
    --lanternWidth: 7vw;
    --lanternHeight: 12.5vw;
  }
  .lantern::before {
    position: absolute;
    top: -8px;
    left: 50%;

    width: 45%;
    height: 8px;

    content: '';
    transform: translateX(-50%);

    background: #aa0317;
  }
  .lantern::after {
    position: absolute;
    bottom: calc(0px - var(--lanternWidth) * 3 / 5);
    left: 50%;

    width: 40%;
    height: calc(var(--lanternWidth) * 3 / 5);

    content: '';
    transform: translateX(-50%);

    background: repeating-linear-gradient(
      to right,
      var(--lanternLine) 0%,
      var(--lanternLine) 5%,
      transparent 5%,
      transparent 10%
    );
  }
  @property --radius {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 35%;
  }
  @keyframes lantern {
    to {
      --radius: 50%;
    }
  }

  /* 漂浮祥云 */

  .cloud {
    position: absolute;
    z-index: 1;
    top: var(--t);
    left: calc(0px - var(--cloudW));
    /* color: #fff; */

    width: var(--cloudW);
    height: var(--cloudH);

    transform: scale(var(--scale)) rotateY(var(--rotateY));
    animation-name: cloud;
    animation-duration: 15s;
    animation-timing-function: cubic-bezier(0.27, 0.42, 0.58, 0.77);
    animation-delay: var(--time);
    animation-iteration-count: infinite;

    --color: #fff;
    color: var(--color);

    --cloudW: 13.1vw;
    --cloudH: 5.5vw;
    --time: 1s;
    --clounLine: 0.5vw;
  }
  @keyframes cloud {
    to {
      left: 100vw;
    }
  }
  .cloud_reverse {
    left: calc(100vw + var(--cloudW));

    animation-name: cloud_reverse;
  }
  @keyframes cloud_reverse {
    to {
      left: calc(0px - var(--cloudW));
    }
  }
  .cloud div {
    position: absolute;
  }
  .cloud1 {
    width: 31.57%;
    height: 87.5%;

    border: var(--clounLine) solid currentColor;
    border-right: none;
    border-radius: 55% 40% 40% 50%;
  }
  .cloud1::after {
    position: absolute;
    right: 0px;
    bottom: -2.857%;

    width: 50%;
    height: 50%;

    content: '';

    border: var(--clounLine) solid currentColor;
    border-bottom: none;
    border-left: none;
    border-radius: 50% 50% 50% 0;
  }
  .cloud2 {
    top: -8%;
    left: 29.4%;

    width: 48%;
    height: 60%;

    border-top: var(--clounLine) solid currentColor;
    border-radius: 50%;
  }
  .cloud3 {
    top: 5%;
    right: 0;

    width: 42.11%;
    height: 112.5%;

    border: var(--clounLine) solid currentColor;
    border-left: none;
    border-radius: 50% 50% 50% 40%;
  }
  .cloud3::after {
    position: absolute;
    bottom: calc(0px - var(--clounLine));
    left: 2.5%;

    width: 50%;
    height: 50%;

    content: '';

    border: var(--clounLine) solid currentColor;
    border-right: none;
    border-radius: 50% 50% 0% 50%;
  }
  .cloud4 {
    bottom: -43.75%;
    left: 20%;

    width: 40%;
    height: 62.5%;

    transform: rotate(-10deg);

    border-bottom: var(--clounLine) solid currentColor;
    border-radius: 50%;
  }

  .cloud5 {
    top: 50%;
    left: -42.105%;

    width: 42.105%;
    height: 87.5%;

    transform: rotate(10deg);

    border-top: var(--clounLine) solid currentColor;
    border-radius: 90% 0% 50% 50%;
  }
  .cloud6 {
    bottom: -40%;
    left: -18.422%;

    width: 42.105%;
    height: 50%;

    transform: rotate(10deg);

    border-bottom: var(--clounLine) solid currentColor;
    border-radius: 0% 0% 50% 50%;
  }
  .cloud6::after {
    position: absolute;
    top: 40%;
    left: -63%;

    width: 75%;
    height: 100%;

    content: '';

    border-top: var(--clounLine) solid currentColor;
    border-radius: 40% 60% 0 0;
  }
</style>
